<template>
  <!-- 选择部门弹窗 -->
  <div>
    <el-dialog v-model="dialogVisible" :title="props.title" width="600px">
      <div v-if="dialogVisible" v-loading="loading">
        <el-scrollbar max-height="500px">
          <el-tree ref="serveTree" :props="treeProps" :load="loadNode" lazy show-checkbox :check-strictly="true" />
        </el-scrollbar>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="SelectServesMask">
import { ref } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";

import { getConfigurationCategoryTree } from "@/api/modules/common";
import { useUserStore } from "@/stores/modules/user";

import { ElMessage, ElMessageBox } from "element-plus";

const userStore = useUserStore();

const props = defineProps({
  title: {
    type: String,
    default: "选择配置项"
  }
});

interface Tree {
  orgNo: string;
  orgName: string;
  orgType: string;
  children?: Tree[];
}

const treeProps = {
  label: "cname",
  children: "children",
  isLeaf: "leaf"
};

const loading = ref(false);

const loadNode = (node: Node, resolve: (data: Tree[]) => void, reject: () => void) => {
  if (node.level === 0) {
    loading.value = true;
    getConfigurationCategoryTree({
      userName: userStore.username,
      findAll: true,
      simpleDto: true,
      parentEventId: 0
    })
      .then((res: any) => {
        loading.value = false;
        let arr = [res];
        let list = arr.map(element => {
          return {
            ...element.attr,
            children: element.children
          };
        });
        resolve(list);
      })
      .catch(() => {
        loading.value = false;
        reject();
      });
  } else if (node.level === 1) {
    let arr1 = node.data.children || [];
    let list = ref<Tree[]>([]);
    arr1.forEach(item => {
      list.value.push({
        ...item.attr,
        children: item.children,
        leaf: item.state ? false : true
      });
    });
    resolve(list.value);
  } else {
    getConfigurationCategoryTree({
      userName: userStore.username,
      findAll: true,
      simpleDto: true,
      parentEventId: node.data.cno,
      _: new Date().getTime()
    })
      .then((res: any) => {
        let list = res.map(element => {
          return {
            ...element.attr,
            children: element.children,
            leaf: element.state ? false : true
          };
        });
        resolve(list);
      })
      .catch(() => {
        reject();
      });
  }
};

const dialogVisible = ref(false);

// 定义 emit 事件
const emit = defineEmits<{
  (e: "change", serves: Tree[]): void;
}>();

const serveTree = ref();
const submit = () => {
  let list = serveTree.value.getCheckedNodes();
  if (list.length == 0) {
    ElMessage.warning("请选择");
    return;
  }

  if (list.length > 1) {
    ElMessage.warning("只能选择一项");
    return;
  }

  dialogVisible.value = false;
  emit("change", list[0]);
};

const open = () => {
  dialogVisible.value = true;
};

defineExpose({
  open
});
</script>
